<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="homework.js"></script>
<script src="query.js"></script>
<style>
    #commentDiv {
        overflow-y: scroll;
        border: 1px solid black;
        width: 400px;
        height: 100px;
    }
</style>
<script>
    window.onload = function () {
        //显示省市
        showProvinceAndCity();

        //显示评论
        showComments();
    }

    /**
     * 显示省和城市
     */
    function showProvinceAndCity() {
        var str = "";
        provinces.forEach(p => {
            str += `<option value="${p.id}">${p.name}省</option>`;
        });
        //得到下拉框标签对象
        var selectObj = $("province")
        selectObj.innerHTML = str;
        showCities(selectObj);
    }

    /**
     * 显示选中的省的城市
     * @param selectObj 下拉框标签
     */
    function showCities(selectObj) {
        var str = "";
        cities.forEach(c => {
            if (selectObj.value == c.proId) {
                str += `<option value="${c.id}">${c.name}</option>`;
            }
        });
        $("city").innerHTML = str;
    }

    /**
     * 添加评论
     */
    function addComment() {
        //新建一条评论对象
        var commentObj = {customer: $("customerText").value, comment: $("commentText").value};
        //添加评论对象
        comments.push(commentObj);
        //刷新评论
        showComments();
    }

    /**
     * 显示评论
     */
    function showComments() {
        $("commentNum").innerHTML = `评论：${comments.length}条`;
        var str = "";
        comments.forEach(c => {
            str += `${c.customer}：${c.comment}<br>`;
        });
        $("commentDiv").innerHTML = str;
    }
</script>


<body>
<select id="province" onchange="showCities(this)"></select>

<select id="city"></select><br>


<div style="display: flex">
    <img src="img.png">
    <p>男士衬衫<br>单价：￥23<br><span id="commentNum"></span></p>
</div>
<div id="commentDiv"></div>

请输入评价人：<input id="customerText" type="text"><br>
请输入评价：<input id="commentText" type="text"> <input id="addButton" type="button" value="评价" onclick="addComment()"><br>

</body>
</html>